<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
	<title>爱情密码</title>
</head>
<script  type="text/javascript" src="jquery-1.3.1.js" /></script>
<script  type="text/javascript" src="jquery-ui-personalized-1.5.3.js"></script>
<script>
  $(document).ready(function(){
    $("#sortable").sortable();
  });
</script>
<script>
	function id(i){
		return document.getElementById(i);
	}
	var plaintext = null;
	function encrypt(){
		plaintext = id("plaintext").value.toUpperCase();
		while(plaintext.indexOf(" ")!=-1){
			plaintext = plaintext.replace(" ","")
		}
		if(plaintext.length == 0){
			return;
		}
		var isvalid = checktext(plaintext);
		if(!isvalid){
			alert("目前只支持英文加密,请核对加密内容");
			return;
		}
		
		var li_nds = id("sortable").getElementsByTagName("li");

		for(i=0;i<li_nds.length;i++){
			if(li_nds[i].id=="sanlan"){
				plaintext = sanlan(plaintext);
			}
			else{
				plaintext = kaisa(plaintext);
				
			}
		}
		
		id("ciphertext").value = (Morse(plaintext));
	}

	function sanlan(text){
		var prefix = "";
		var suffix =  "";
		for(j=0;j<text.length;j++){
			if(j%2 == 0){
				prefix += text.charAt(j);
			}
			else{
			suffix += text.charAt(j);
			}
		}
		return prefix + suffix;
	}

	function kaisa(text){
		var rndoffset = Math.floor(Math.random( )*26+1);
		var newtext = "";
		for(k=0;k<text.length;k++){
				newtext += String.fromCharCode(65+(text.charCodeAt(k)-65+rndoffset)%26);
		}
		return newtext;
	}

	function Morse(text){
		var MorseTable = new Array (["A","*-"],
									["B","-***"],
									["C","-*-*"],
									["D","-**"],
									["E","*"],
									["F","**-*"],
									["G","--*"],
									["H","****"],
									["I","**"],
									["J","*---"],
									["K","-*-"],
									["L","*-**"],
									["M","--"],
									["N","-*"],
									["O","---"],
									["P","*--*"],
									["Q","--*-"],
									["R","*-*"],
									["S","***"],
									["T","-"],
									["U","**-"],
									["V","***-"],
									["W","*--"],
									["X","-**-"],
									["Y","-*--"],
									["Z","--**"]);
	var newtext = "";
	
	for(i=0;i<text.length;i++){
			newtext += MorseTable[text.charCodeAt(i)-65][1]+"/";
		}
	return newtext.substr(0,newtext.lastIndexOf('/'));
	}

	function checktext(text){
		for(i=0;i<text.length;i++){
			if(text.charCodeAt(i)<65||text.charCodeAt(i)>90){
				
				return 0;
			}
		}
		return 1;
	}

	function del(childid){
		id("sortable").removeChild(id(childid));
		return false;
	}

	function decrypt(){
	}
	
	function switchEncrypt(){
		var EncryptClassNm = id("encryptBt").className;
		var DecryptClassNm = id("decryptBt").className;
		if(EncryptClassNm.indexOf("select")==-1){
			id("encryptBt").className = EncryptClassNm + " select";
			id("decryptBt").className = DecryptClassNm.substr(0,DecryptClassNm.indexOf(" "));
		}
		id("encryptSteps").style.display="block";
		id("decryptSteps").style.display="none";
		
	}
	function switchDecrypt(){
		var EncryptClassNm = id("encryptBt").className;
		var DecryptClassNm = id("decryptBt").className;
		if(DecryptClassNm.indexOf("select")==-1){
			id("decryptBt").className = DecryptClassNm +" select";
			id("encryptBt").className = EncryptClassNm.substr(0,EncryptClassNm.indexOf(" "));
		}
		id("encryptSteps").style.display="none";
		id("decryptSteps").style.display="block";
	}
</script>
<style>
body{
margin:0;
padding:0;
color:#333;
}
img{
border:none;
}
h1,h2,h3,h4{
margin:0;
padding:0;
}
h5{
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
padding:0;
}
li {
list-style-type:none;
} 
.tip{
padding-left:10px;
background:url(arrow.png) no-repeat left top;

}
.right_nav{
border:#000 solid 1px;width:146px;height:40px;
font-weight:bold;
color:#fff;
cursor:pointer;
text-align:center;
line-height:30px;
}
.select{
border-bottom:none;
border-right:none;
border-left:none;
}

.method{
background:url(light.gif) no-repeat;
width:152px;
height:25px;
color:#333;
margin-top:10px;
padding-top:7px;
text-align:center;
cursor:pointer;
font-weight:bold;
}
.del{
position:relative;
background:url(del.gif) no-repeat;
width:16px;
height:16px;
cursor:pointer;
left:20px;
top:-10px;
float:right;
}
.del_tip{
position:absolute;
background:url(deltip.png);
border:#fc961d solid 1px;
width:90px;
height:40px;
top:-40px;
left:10px;
color:#2244BB;
font-size:12px;
display:none;
padding:2px 2px;
float:left;
}
a{
text-decoration:none;
cursor:pointer;
}
a:link {
color:#2244BB;
}
a:visited {
color:#2244BB;
}
a:active {
color:#2244BB;
}
#sortable a:hover .del_tip{
display:inline;
}
#what a{
color:#87a0fc;
text-decoration:underline;
}
#what a:link{
color:#87a0fc;
}
a:visited {
color:#87a0fc
}
a:active {
color:#87a0fc
}
</style>
<body style="background:#000000 url(bg_holiday.jpg) no-repeat scroll center top;">

		<div id="logo" style="text-align:center;margin-left:10px;">
			<a href="http://www.forlasting.cn" target="_blank">
				<img src="forlasting-logo.jpg" alt='alt'/>
			</a>
		</div>
		
	<div id="container" style="position:relative;width:960px;left:50%;margin-left:-480px;background:url(ct_bg.jpg) no-repeat top left;padding-top:41px">
		<h3 style="width:960px;height:30px;color:#fff;">
			<span style="float:left;">爱情密码</span>
			<span style="float:right;font-size:12px;margin:8px 4px;">作者:losange</span>
		</h3>
		<div style="background:url(cc_bg.jpg) no-repeat;width:960px;height:528px;">
			<div id="cl" style="width:573px;height:595px;padding:20px 10px;float:left;">
				<h3>原文输入:</h3>
				<textarea id="plaintext" name="input" style="width:500px;height:220px;"></textarea>
				<h3>加密后输出<span style="font-size:12px;color:#666">("/"为分割符)</span>:</h3>
				<textarea id="ciphertext" name="output" style="width:500px;height:220px;"></textarea>
			</div>

			<div id="cr" style="background-color:#454343;width:300px;height:528px;border:#000 solid 1px;float:right;">
				<div id="right_nav" style="height:40px;">
					<span id="encryptBt" class="right_nav select" style="float:left" onclick="switchEncrypt();">加密</span>
					<span id="decryptBt" class="right_nav" style="float:right" onclick="switchDecrypt()">解密</span>
				</div>
				<div id="encryptSteps">
					<div id="inf" style="width:300px;height:50px;color:#fff;font-size:14px;">
						<h5 class="tip">在左边输入原文框中输入你要加密的内容<br/>(目前只支持英文字母加密)</h5>
					</div>
					<div id="step1" style="width:300px;height:260px;color:#fff;font-size:14px;">
						<h4 style="background: url(steps_bg.gif) repeat-x;padding:7px 7px;">第一步</h4>
						<h5 class="tip">选择加密顺序,程序将按以下顺序进行加密<br/>(你可以<span style="color:#87a0fc">拖动</span>下面的按钮交换加密顺序)</h5>
						<ul id="sortable" style="float:left">
							<li class="method" id="sanlan">栅栏易位<a href="#" onclick="return del('sanlan')"><div class="del"><span class="del_tip">删除,将不使用这种方式加密</span></div ></a></li>
							<li class="method" id="kaisa">恺撒移位<a href="#" onclick="return del('kaisa')"><div class="del"><span class="del_tip">删除,将不使用这种方式加密</span></div ></a></li>
						</ul>
						<div style="clear:both;"></div>
						<h5 id="what">什么是<a href="whatis.html" target="_blank">栅栏易位?</a>&nbsp;&nbsp;&nbsp;什么是<a href="whatis.html" target="_blank">恺撒移位?</a></h5>
					</div>
					<div id="step2" style="width:300px;height:120px;color:#fff;font-size:14px;">
					<h4 style="background: url(steps_bg.gif) repeat-x;padding:7px 7px;">第二步</h4>
						<h5 class="tip">摩斯电码转换:这是最后一步,你只要点击下面的按钮即可完成加密</h5>
						<div class="method" style="margin-left:40px;height:32px;" onclick="encrypt()">摩斯</div>
					</div>
				</div>

				<div id="decryptSteps" style="display:none;">
					<h3 style="color:#fff;margin-top:50%;text-align:center;">解密功能尚未开放!</h3>
				</div>
			</div>
		</div>
	</div>

</body>
</html>